<template>
    
  <div class="searchmain_wrap">
    <el-input
      :placeholder="placeValue"
      v-model="value"
      class="input-with-select"
      @change="handleSearch"
    >
      <el-button slot="append" size="large" @click="handleSearch"
        >搜 索</el-button
      >
    </el-input>
    <el-button
      class="gjsearch_btn"
      size="large"
      @click="handlegjSearch"
      v-if="gjFlag"
      >高级检索</el-button
    >

     
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    inputValue: {
      type: String,
      required: false,
      // 定义默认值
      default: "",
    },
    placeValue: {
      type: String,
      required: false,
      // 定义默认值
      default: "请输入关键字",
    },
    gjFlag: {
      // 是否显示高级检索按钮，默认不显示
      type: Boolean,
      required: false,
      // 定义默认值
      default: false,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  created() {
    this.value = this.inputValue;
  },
  methods: {
    handleSearch() {
      this.$emit("handleSearch", this.value);
    },
    handlegjSearch() {
      this.$router.push("/basicsearch/advanced");
    },
  },
};
</script>
<style lang="scss">
.searchmain_wrap {
  width: 100%;
  height: 200px;
  background-image: url(../assets/top_banner.png);
  background-size: 100% 100%;
  background-repeat-y: no-repeat;
  background-size: cover;
  min-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  .input-with-select {
    width: 700px;
    height: 50px;

    .el-input__inner {
      height: 50px;
      line-height: 50px;
      border-radius: 15px 0 0 15px;
    }
    .el-input-group__append,
    .el-input-group__prepend,
    .el-input__inner {
      border: 2px solid #2f74d3;
    }
    .el-input-group__append {
      padding: 0 30px;
      border-radius: 0 15px 15px 0;
      background-color: #2f74d3;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .gjsearch_btn {
    height: 50px;
    background-color: #2f74d3;
    color: #fff;
    margin-left: 20px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
